---
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";
import BaseHead from "../components/BaseHead.astro";
import Footer from "../components/Footer.astro";
import FormattedDate from "../components/FormattedDate.astro";
import Header from "../components/Header.astro";

type Props = CollectionEntry<"blog">["data"];

const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
---

<html lang="en">
  <head>
    <BaseHead title={title} description={description} />
    <style>
      main {
        width: calc(100% - 2em);
        max-width: 100%;
        margin: 0;
      }
      .hero-image {
        width: 100%;
      }
      .hero-image img {
        display: block;
        margin: 0 auto;
        border-radius: 12px;
        box-shadow: var(--box-shadow);
      }
      .prose {
        width: 720px;
        max-width: calc(100% - 2em);
        margin: auto;
        padding: 1em;
        color: rgb(var(--gray-dark));
      }
      .title {
        margin-bottom: 1em;
        padding: 1em 0;
        text-align: center;
        line-height: 1;
      }
      .title h1 {
        margin: 0 0 0.5em 0;
      }
      .date {
        margin-bottom: 0.5em;
        color: rgb(var(--gray));
      }
      .last-updated-on {
        font-style: italic;
      }
    </style>
  </head>

  <body>
    <Header />
    <main>
      <article>
        <div class="hero-image">
          {
            heroImage && (
              <Image width={1020} height={510} src={heroImage} alt="" />
            )
          }
        </div>
        <div class="prose">
          <div class="title">
            <div class="date">
              <FormattedDate date={pubDate} />
              {
                updatedDate && (
                  <div class="last-updated-on">
                    Last updated on <FormattedDate date={updatedDate} />
                  </div>
                )
              }
            </div>
            <h1>{title}</h1>
            <hr />
          </div>
          <slot />
        </div>
      </article>
    </main>
    <Footer />
  </body>
</html>
